<template>
	<view class="quote-container" :class="isMine ? 'my_message' : ''">
		<view class="quoetcss">
			<!-- 文本引用 -->
			<view @click="previewText" v-if="quotedata.type === 'TIMTextElem'">
				<view v-for="(item, index) in quoteDom" :key="index" class="message-body-span">
					<span class="message-body-span-text" v-if="item.name === 'span'">{{ quotedata.nick }}：{{ item.text }}</span>
					<image v-if="item.name === 'img'" class="emoji-icon" :src="item.src"></image>
				</view>
			</view>

			<!-- 图片引用 -->
			<view @click="previewImage(quotedata.payload.imageInfoArray[0].url)" class="flex_c" v-if="quotedata.type === 'TIMImageElem'">
				{{ quotedata.nick }}：
				<image style="width: 55rpx; height: 60rpx" :src="quotedata.payload.imageInfoArray[0].url" mode="aspectFit"></image>
			</view>

			<!-- 视频引用 -->
			<view @click="handleVideoPlay" class="video flex_c" v-if="quotedata.type === 'TIMVideoFileElem'">
				{{ quotedata.nick }}：
				<view class="videopore">
					<image style="width: 55rpx; height: 60rpx" :src="quotedata.payload.thumbUrl" mode="aspectFit"></image>
					<image class="videads" src="@/static/timstatic/images/play.png" mode=""></image>
				</view>
			</view>

			<!-- 音频引用 -->
			<view @click="handleAudioPlay" class="audio flex_c" v-if="quotedata.type === 'TIMSoundElem'">
				{{ quotedata.nick }}：
				<view class="audioflex">
					<image v-if="isAudioPlaying" class="audioimg" src="@/static/timstatic/images/audio-play.png" mode=""></image>
					<image v-else class="audioimg" src="@/static/timstatic/images/audio-msg.png" mode=""></image>
					<view class="">
						{{ quotedata.payload.second + '" ' }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { parseText } from '../../../base/message-facade';

export default {
	name: 'QuoteMessage',
	props: {
		message: {
			type: Object,
			required: true,
			default: () => ({})
		},
		isMine: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			isAudioPlaying: false,
			audioContext: null,
			quotedata: {},
			quoteDom: []
		};
	},
	watch: {
		message: {
			handler(newVal) {
				if (newVal.cloudCustomData) {
					this.quotedata = JSON.parse(newVal.cloudCustomData);
					// 解析文本引用内容
					if (this.quotedata.type === 'TIMTextElem') {
						this.quoteDom = parseText(this.quotedata);
					}
				} else {
					this.quotedata = {};
					this.quoteDom = [];
				}
			},
			immediate: true,
			deep: true
		}
	},
	beforeMount() {
		this.audioContext = uni.createInnerAudioContext();
		this.audioContext.onPlay(() => {
			this.isAudioPlaying = true;
		});
		this.audioContext.onEnded(() => {
			this.isAudioPlaying = false;
		});
		this.audioContext.onError((e) => {
			console.error('音频播放错误:', e);
			this.isAudioPlaying = false;
			uni.showToast({ icon: 'none', title: '该音频暂不支持播放' });
		});
	},
	beforeUnmount() {
		if (this.audioContext) {
			this.audioContext.destroy();
		}
	},
	methods: {
		previewText() {
			uni.$emit('textHandler', {
				isshow: true,
				message: { payload: this.quotedata.payload }
			});
		},
		previewImage(url) {
			uni.previewImage({ urls: [url] });
		},
		handleVideoPlay() {
			uni.$emit('videoPlayerHandler', {
				isPlay: true,
				message: { payload: this.quotedata.payload }
			});
		},
		handleAudioPlay() {
			if (!this.quotedata.payload?.url) return;
			this.isAudioPlaying ? this.audioContext.pause() : this.audioContext.play();
			this.isAudioPlaying = !this.isAudioPlaying;
		}
	}
};
</script>

<style scoped>
/* 引用容器：靠右排列，不受外部影响 */
.quote-container {
	display: flex;
	width: 100%;
	margin-top: 10rpx; /* 与上方消息保持间距 */
}
.my_message{
	justify-content: flex-end; /* 靠右排列 */
}

/* 引用内容样式 */
.quoetcss {
	display: inline-block;
	max-width: 60vw; /* 限制最大宽度 */
	width: auto; /* 宽度由内容决定 */
	padding: 15rpx 25rpx;
	background-color: #e4e4e4;
	color: #333;
	font-size: 26rpx;
	border-radius: 8rpx;
}

/* 表情图标 */
.emoji-icon {
	width: 40rpx;
	height: 40rpx;
	display: inline-block;
	vertical-align: middle;
}

/* 文本引用样式 */
.message-body-span {
	display: inline;
	font-size: 26rpx;
	line-height: 1.5;
}
.message-body-span-text {
	white-space: pre-line;
	word-wrap: break-word;
	word-break: break-all;
	vertical-align: middle;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* 通用flex布局 */
.flex_c {
	display: flex;
	flex-direction: row;
	align-items: center;
}

/* 音频样式 */
.audioflex {
	display: flex;
	align-items: center;
}
.audioimg {
	width: 34rpx;
	height: 34rpx;
	margin-right: 10rpx;
}

/* 视频样式 */
.videopore {
	width: 55rpx;
	height: 60rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.videads {
	width: 20rpx;
	height: 20rpx;
	position: absolute;
}
</style>
